<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<main>
  <div
    class="tp-breadcrumb__area fix tp-breadcrumb-height"
    style="background-image: url('../../../../assets/svg/breadcrumb.svg');height: 250px"
  >
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="tp-breadcrumb__content text-center z-index-5">
            <div class="tp-breadcrumb__list">
              <span><a href="../../../../index.html">Apache </a></span>
              <span class="dvdr">.</span>
              <span> HertzBeat</span>
            </div>
            <h3 class="tp-breadcrumb__title"
              ><span class="p-relative z-index-5">
                监 控 模 版
                <span class="tp-title-shape">
                  <img src="assets/svg/title-line.svg">
                </span>
              </span>
              市 场
            </h3>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="tp-product__area pt-xxl-4 pb-xxl-5">
    <div class="container">
      <div class="tp-product__top-area pb-5">
        <div class="row d-flex justify-content-end">
          <div class="col-xl-4 col-lg-4 mb-5">
            <div class="tp-product__filter">
              <nz-select nzShowSearch nzAllowClear nzPlaceHolder="选择排序方法" nzSize="large"
                         [(ngModel)]="orderOption" (ngModelChange)="orderOptionChange($event)">
                <nz-option nzLabel="最早创建" nzValue=1></nz-option>
                <nz-option nzLabel="最近创建" nzValue=2></nz-option>
                <nz-option nzLabel="最早更新" nzValue=3></nz-option>
                <nz-option nzLabel="最近更新" nzValue=4></nz-option>
                <nz-option nzLabel="最少下载" nzValue=5></nz-option>
                <nz-option nzLabel="最多下载" nzValue=6></nz-option>
                <nz-option nzLabel="最少收藏" nzValue=7></nz-option>
                <nz-option nzLabel="最多收藏" nzValue=8></nz-option>
              </nz-select>
            </div>
          </div>
          <div class="col-xl-4 col-lg-4 mb-5">
            <div class="tp-product__input">
              <nz-input-group nzSearch nzSize="large" [nzAddOnAfter]="suffixButton">
                <input type="text" nz-input placeholder="关键字搜索" [(ngModel)]="nameLike"/>
              </nz-input-group>
              <ng-template #suffixButton>
                <button nz-button nzType="primary" nzSize="large" nzSearch (click)="getTemplatePageByOption()">
                  <span class="material-symbols-outlined">search</span>
                </button>
              </ng-template>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xl-3 col-lg-4">
          <div class="tp-shop-sidebar me-4">
            <!-- categories -->
            <div class="tp-shop-widget mb-3">
              <h3 class="tp-shop-widget-title">
                模版类别
              </h3>
              <div style="border-bottom: 1px solid rgb(233, 233, 233);"></div>
              <div class="tp-shop-widget-content mt-4">
                <div class="tp-shop-widget-categories">
                  <label
                    nz-checkbox
                    [(ngModel)]="allChecked"
                    (ngModelChange)="updateAllChecked()"
                    [nzIndeterminate]="indeterminate">
                    全选
                  </label>
                  <nz-checkbox-group [(ngModel)]="categoryList" (ngModelChange)="updateSingleChecked()"></nz-checkbox-group>
                </div>
              </div>
            </div>
            <div class="tp-shop-widget mb-4">
              <h3 class="tp-shop-widget-title">标签</h3>
              <div style="border-bottom: 1px solid rgb(233, 233, 233);"></div>
              <div class="tp-shop-widget-tag-box mt-4">
                <div class="tp-shop-widget-tag" (click)="tagChange()">
                  <span>Docker</span>
                  <span>Linux</span>
                  <span>K8S</span>
                  <span>SpringBoot2</span>
                  <span>SpringBoot3</span>
                  <span>Web</span>
                  <span>Windows</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-9 col-lg-8" style="position: relative;">
          <div class="container">
            <div class="row gy-0 gx-3">
              <div class="col-xl-4 col-md-6 mb-0" *ngFor="let item of templateList; let i = index">
                <div class="tp-fea-product__item tp-fea-product__item-2">
                  <nz-card style="width: 300px;margin-top: 16px" [nzLoading]="loading" [nzActions]="[actionSetting, actionEdit, actionEllipsis]">
                    <nz-card-meta
                      [nzAvatar]="avatarTemplate"
                      [nzTitle]=item.name
                      [nzDescription]=item.description
                    ></nz-card-meta>
                  </nz-card>
                  <ng-template #avatarTemplate>
                    <nz-avatar nzSrc="assets/svg/{{item.categoryId}}-img.svg"></nz-avatar>
                  </ng-template>
                  <ng-template #actionSetting>
                    <div style="  display:inline-flex;align-items: center; color: rgba(18,8,24,0.92)">
                      <span nz-icon nzType="star" nzTheme="outline" style="color: #b02a37"></span>&emsp;{{ item.star>=1000?((item.star/1000).toFixed(2)+'k'):item.star }}
                    </div>
                  </ng-template>
                  <ng-template #actionEdit>
                    <div style="  display:inline-flex;align-items: center; color: rgba(18,8,24,0.92)">
                      <span nz-icon nzType="eye" nzTheme="outline" style="color: #b02a37"></span>&emsp;{{ item.star>=1000?((item.star/1000).toFixed(2)+'k'):item.star }}
                    </div>
                  </ng-template>
                  <ng-template #actionEllipsis>
                    <div style="  display:inline-flex;align-items: center; color: rgba(18,8,24,0.92)">
                      <span nz-icon nzType="download" nzTheme="outline" style="color: #b02a37"></span>&emsp;{{ item.download>=1000?((item.download/1000).toFixed(2)+'k'):item.download }}
                    </div>
                  </ng-template>
                  <div class="template_card__icon-box">
                    <a href="market/detail" onclick="event.preventDefault()" (click)="downloadLatestTemplate(item.id,item.user,item.latest,item.name)"
                       nzTooltipTitle="下载最新版本" nzTooltipPlacement="bottom" nz-tooltip>
                      <svg
                        t="1720551677718"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="1510"
                        width="18"
                        height="18"
                      >
                        <path
                          d="M511.985404 988.20397L354.645856 830.863205l31.692198-31.692197 125.64735 125.646134 125.647351-125.646134 31.693414 31.692197z"
                          fill="currentcolor"
                          p-id="1511"
                        ></path>
                        <path d="M489.574876 549.16438h44.821057v390.984362h-44.821057z" fill="currentcolor" p-id="1512"></path>
                        <path
                          d="M802.862512 498.506247a292.347627 292.347627 0 0 0 3.606362-45.781943c0-160.264776-129.920251-290.18381-290.183811-290.183811-156.325145 0-283.755607 123.617328-289.927168 278.428166-98.420231 18.360213-172.926572 104.690313-172.926573 208.435553 0 117.112497 94.937933 212.051646 212.051646 212.051646l0.254209-0.002433v0.002433h50.690974v-44.821058H265.760287v-0.003649c-0.09244 0-0.184879 0.003649-0.278535 0.003649-44.669019 0-86.664586-17.394462-118.249748-48.98084-31.585162-31.585162-48.980841-73.580729-48.980841-118.249748s17.394462-86.664586 48.980841-118.249748c22.566216-22.566216 50.447712-37.88322 80.820212-44.794298a168.56853 168.56853 0 0 1 37.429536-4.186542c2.410728 0 4.811726 0.060816 7.205426 0.161769a249.539565 249.539565 0 0 1-1.764867-29.609873c0-5.121885 0.173932-10.217012 0.484091-15.286596 3.651365-59.787763 28.659934-115.491154 71.381639-158.211643 46.342662-46.342662 107.959757-71.865731 173.498239-71.86573 65.539698 0 127.155576 25.521852 173.498238 71.86573 46.342662 46.342662 71.865731 107.959757 71.865731 173.498239 0 16.313162-1.583637 32.383062-4.674283 48.035767a242.757415 242.757415 0 0 1-12.339474 42.018677h43.569473v0.029192c0.211638-0.001216 0.420844-0.013379 0.632482-0.01338 1.11779 0 2.233147 0.014596 3.346071 0.041355 35.320453 0.841687 68.400461 14.992248 93.471062 40.062849 25.861203 25.861203 40.102987 60.24388 40.102987 96.817133 0 36.573253-14.241785 70.95593-40.102987 96.817133-25.861203 25.861203-60.245096 40.102987-96.817133 40.102987l-0.063248-0.001216v0.001216h-72.483617v44.821057h76.492577v-0.049868c98.550376-2.099353 177.796681-82.63738 177.796682-181.691309-0.002433-95.656772-73.899403-174.050444-167.718329-181.210866z"
                          fill="currentcolor"
                          p-id="1513"
                        ></path>
                      </svg>
                    </a>
                    <a href="market/detail" (click)="pickTemplate(item.id)" nzTooltipTitle="详情" nzTooltipPlacement="bottom" nz-tooltip>
                      <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                          d="M8.79673 4.85355L12.0361 1.70712V3C12.0361 3.27614 12.2666 3.49999 12.5509 3.49999C12.8352 3.49999 13.0656 3.27614 13.0656 3V0.500039C13.0656 0.483562 13.0648 0.467086 13.0631 0.450656C13.0623 0.44325 13.0609 0.436078 13.0598 0.428789C13.0585 0.419953 13.0575 0.411094 13.0557 0.402305C13.054 0.393914 13.0516 0.385781 13.0495 0.377555C13.0475 0.369984 13.0458 0.362367 13.0434 0.354867C13.0409 0.346781 13.0378 0.338977 13.0349 0.331078C13.0321 0.323602 13.0296 0.316055 13.0264 0.308672C13.0233 0.301289 13.0196 0.294234 13.0161 0.287039C13.0124 0.279445 13.0089 0.271781 13.0048 0.264328C13.001 0.257437 12.9967 0.250875 12.9926 0.244172C12.9881 0.236883 12.9838 0.2295 12.9789 0.222375C12.9739 0.214969 12.9682 0.208008 12.9627 0.200883C12.9581 0.194953 12.9539 0.188859 12.949 0.18307C12.9383 0.170437 12.927 0.158273 12.9151 0.146719C12.9151 0.146625 12.915 0.146531 12.9149 0.146437C12.9148 0.146344 12.9147 0.146297 12.9146 0.146203C12.9027 0.134648 12.8902 0.123703 12.8772 0.11332C12.8712 0.108562 12.8649 0.104437 12.8588 0.0999844C12.8515 0.0946641 12.8443 0.0891562 12.8367 0.0842109C12.8294 0.0794531 12.8218 0.0753281 12.8142 0.0709688C12.8073 0.0669609 12.8006 0.0627656 12.7935 0.0590625C12.7858 0.0550781 12.778 0.0517031 12.7701 0.0481172C12.7627 0.0447187 12.7554 0.0411328 12.7479 0.0380625C12.7403 0.0350156 12.7325 0.0325313 12.7248 0.0298594C12.7166 0.0270234 12.7086 0.024 12.7003 0.0215625C12.6926 0.0192891 12.6847 0.017625 12.6769 0.0157266C12.6685 0.0136406 12.6601 0.0113438 12.6515 0.00967969C12.6424 0.00794531 12.6333 0.00689062 12.6242 0.005625C12.6167 0.00459375 12.6093 0.0031875 12.6017 0.00246094C12.5848 0.000867187 12.5678 0 12.5509 0H9.97704C9.69274 0 9.46228 0.223852 9.46228 0.499992C9.46228 0.776133 9.69274 0.999984 9.97704 0.999984H11.3081L8.06874 4.14645C7.86771 4.3417 7.86771 4.6583 8.06874 4.85355C8.26976 5.04881 8.59571 5.04881 8.79673 4.85355Z"
                          fill="currentcolor"
                        />
                        <path
                          d="M4.97985 7.14644L1.74048 10.2929V9C1.74048 8.72386 1.51002 8.50001 1.22572 8.50001C0.941401 8.50001 0.710938 8.72386 0.710938 9V11.5C0.710938 11.5165 0.71183 11.5329 0.713495 11.5493C0.714243 11.5567 0.715667 11.5639 0.716753 11.5712C0.718056 11.58 0.719117 11.5889 0.720927 11.5977C0.72264 11.6061 0.725005 11.6142 0.727153 11.6224C0.729107 11.63 0.73082 11.6376 0.733161 11.6451C0.73567 11.6532 0.738783 11.661 0.741703 11.6689C0.744478 11.6764 0.747011 11.6839 0.750148 11.6913C0.753285 11.6987 0.757001 11.7057 0.7605 11.7129C0.764192 11.7205 0.767667 11.7282 0.771769 11.7356C0.775581 11.7425 0.7799 11.7491 0.784027 11.7558C0.788515 11.7631 0.792761 11.7705 0.79766 11.7776C0.802751 11.785 0.808422 11.7919 0.813899 11.7991C0.818484 11.805 0.822731 11.8111 0.827629 11.8169C0.838318 11.8296 0.849587 11.8417 0.861483 11.8533C0.86158 11.8534 0.861628 11.8535 0.861724 11.8535C0.861821 11.8536 0.861917 11.8537 0.862014 11.8538C0.87391 11.8653 0.886433 11.8763 0.899439 11.8867C0.905399 11.8914 0.911673 11.8955 0.917778 11.9C0.925113 11.9053 0.93228 11.9108 0.939905 11.9158C0.947216 11.9205 0.954817 11.9246 0.962345 11.929C0.969246 11.933 0.975979 11.9372 0.983097 11.9409C0.99077 11.9449 0.998661 11.9483 1.00648 11.9519C1.01389 11.9553 1.02117 11.9588 1.02875 11.9619C1.03635 11.9649 1.0441 11.9674 1.05182 11.9701C1.05995 11.9729 1.06799 11.976 1.07631 11.9784C1.08403 11.9807 1.09187 11.9823 1.09967 11.9842C1.10814 11.9863 1.11651 11.9886 1.12515 11.9903C1.1342 11.992 1.14332 11.9931 1.15242 11.9943C1.15992 11.9954 1.16733 11.9968 1.17493 11.9975C1.19182 11.9991 1.20876 12 1.2257 12H1.22572H3.79955C4.08384 12 4.3143 11.7761 4.3143 11.5C4.3143 11.2238 4.08384 11 3.79955 11H2.46848L5.70785 7.85355C5.90887 7.65829 5.90887 7.3417 5.70785 7.14644C5.50682 6.95119 5.18088 6.95119 4.97985 7.14644Z"
                          fill="currentcolor"
                        />
                        <path
                          d="M12.9628 11.799C12.9682 11.7919 12.9739 11.785 12.9789 11.7776C12.9839 11.7705 12.9881 11.7631 12.9926 11.7558C12.9967 11.7491 13.001 11.7426 13.0048 11.7357C13.0089 11.7282 13.0124 11.7206 13.0161 11.7129C13.0196 11.7058 13.0233 11.6987 13.0264 11.6913C13.0296 11.684 13.0321 11.6764 13.0349 11.6689C13.0378 11.661 13.0409 11.6532 13.0434 11.6452C13.0458 11.6377 13.0475 11.63 13.0494 11.6225C13.0516 11.6142 13.0539 11.6061 13.0557 11.5977C13.0574 11.589 13.0585 11.5801 13.0598 11.5713C13.0609 11.564 13.0623 11.5568 13.0631 11.5494C13.0648 11.533 13.0656 11.5165 13.0656 11.5V9C13.0656 8.72386 12.8352 8.50001 12.5509 8.50001C12.2666 8.50001 12.0361 8.72386 12.0361 9V10.2929L8.79673 7.14644C8.59571 6.95119 8.26976 6.95119 8.06874 7.14644C7.86771 7.3417 7.86771 7.65829 8.06874 7.85355L11.3081 11H9.97704C9.69274 11 9.46228 11.2238 9.46228 11.5C9.46228 11.7761 9.69274 12 9.97704 12H12.5509C12.5678 12 12.5848 11.9991 12.6017 11.9975C12.6093 11.9968 12.6167 11.9954 12.6242 11.9943C12.6333 11.9931 12.6424 11.9921 12.6515 11.9903C12.6601 11.9886 12.6684 11.9863 12.6769 11.9842C12.6847 11.9823 12.6926 11.9807 12.7003 11.9784C12.7086 11.976 12.7166 11.973 12.7247 11.9701C12.7325 11.9674 12.7402 11.965 12.7478 11.9619C12.7554 11.9589 12.7627 11.9553 12.7701 11.9519C12.7779 11.9483 12.7858 11.9449 12.7935 11.9409C12.8006 11.9372 12.8073 11.933 12.8142 11.9291C12.8217 11.9247 12.8293 11.9205 12.8367 11.9158C12.8443 11.9108 12.8514 11.9054 12.8587 11.9001C12.8648 11.8956 12.8711 11.8914 12.8771 11.8867C12.89 11.8764 12.9025 11.8655 12.9143 11.8541C12.9145 11.8539 12.9147 11.8537 12.9148 11.8536C12.915 11.8534 12.9152 11.8532 12.9153 11.853C12.9271 11.8415 12.9383 11.8295 12.9489 11.8169C12.9539 11.8111 12.9581 11.805 12.9628 11.799Z"
                          fill="currentcolor"
                        />
                        <path
                          d="M2.46848 1.00001H3.79954C4.08384 1.00001 4.3143 0.776156 4.3143 0.500016C4.3143 0.223852 4.08384 0 3.79954 0H1.2257H1.22567C1.20873 0 1.19177 0.000867188 1.1749 0.00248437C1.16728 0.00321094 1.1599 0.00459375 1.15239 0.00564844C1.14329 0.00691406 1.13417 0.00794531 1.12512 0.00967969C1.11649 0.0113438 1.10811 0.0136406 1.09964 0.0157266C1.09185 0.017625 1.08401 0.0192891 1.07629 0.0215625C1.06796 0.024 1.05993 0.0270469 1.05179 0.0298828C1.0441 0.0325781 1.03633 0.0350391 1.02873 0.0380859C1.02113 0.0411563 1.01381 0.0447422 1.00641 0.0481641C0.998612 0.0517266 0.990722 0.0551016 0.983073 0.0590859C0.975954 0.0627891 0.969198 0.0670078 0.962273 0.0710156C0.954793 0.0753516 0.947192 0.0794531 0.939881 0.0842109C0.932231 0.0891797 0.925041 0.0947109 0.917681 0.100055C0.9116 0.104484 0.905351 0.108586 0.899439 0.11332C0.87321 0.134227 0.849129 0.157617 0.827605 0.183094C0.822731 0.188836 0.818508 0.194906 0.813947 0.200836C0.808446 0.207984 0.802751 0.214969 0.797636 0.222398C0.792737 0.2295 0.788515 0.236859 0.784026 0.244148C0.7799 0.250852 0.775557 0.257437 0.771744 0.264352C0.767642 0.271781 0.764192 0.279422 0.7605 0.287016C0.757001 0.294211 0.753285 0.301312 0.750124 0.308695C0.746987 0.316078 0.744454 0.323602 0.741679 0.331102C0.738759 0.339 0.735646 0.346805 0.733113 0.354891C0.730772 0.362391 0.729059 0.370008 0.727104 0.377578C0.724957 0.385805 0.722592 0.393937 0.720879 0.402328C0.719093 0.411117 0.718032 0.419977 0.716729 0.428813C0.715667 0.436102 0.714219 0.443297 0.713471 0.45068C0.71183 0.467063 0.710938 0.483516 0.710938 0.499992V3C0.710938 3.27614 0.941401 3.49999 1.2257 3.49999C1.50999 3.49999 1.74046 3.27614 1.74046 3V1.70712L4.97983 4.85355C5.18085 5.04881 5.5068 5.04881 5.70782 4.85355C5.90885 4.6583 5.90885 4.3417 5.70782 4.14645L2.46848 1.00001Z"
                          fill="currentcolor"
                        />
                      </svg>
                    </a>
                    <a href="javascript:" (click)="starTemplate(item.id)" *ngIf="!item.starByNowUser" nzTooltipTitle="收藏" nzTooltipPlacement="bottom" nz-tooltip>
                      <svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                          d="M13.6048 1.52734C12.0189 0.1875 9.5853 0.378906 8.0814 1.9375C6.55015 0.378906 4.11655 0.1875 2.53062 1.52734C0.479836 3.25 0.780617 6.06641 2.25718 7.57031L7.04234 12.4648C7.31577 12.7383 7.67124 12.9023 8.0814 12.9023C8.46421 12.9023 8.81968 12.7383 9.09312 12.4648L13.9056 7.57031C15.3548 6.06641 15.6556 3.25 13.6048 1.52734ZM12.9486 6.64062L8.16343 11.5352C8.10874 11.5898 8.05405 11.5898 7.97202 11.5352L3.18687 6.64062C2.17515 5.62891 1.98374 3.71484 3.37827 2.53906C4.44468 1.63672 6.0853 1.77344 7.12437 2.8125L8.0814 3.79688L9.03843 2.8125C10.0501 1.77344 11.6908 1.63672 12.7572 2.51172C14.1517 3.71484 13.9603 5.62891 12.9486 6.64062Z"
                          fill="currentcolor"
                        />
                      </svg>
                    </a>
                    <a href="javascript:" (click)="cancelStarTemplate(item.id)" *ngIf="item.starByNowUser" nzTooltipTitle="取消收藏" nzTooltipPlacement="bottom" nz-tooltip>
                      <svg width="16" height="13" viewBox="0 0 16 13" style="fill: #b02a37" xmlns="http://www.w3.org/2000/svg">
                        <path
                          d="M13.6048 1.52734C12.0189 0.1875 9.5853 0.378906 8.0814 1.9375C6.55015 0.378906 4.11655 0.1875 2.53062 1.52734C0.479836 3.25 0.780617 6.06641 2.25718 7.57031L7.04234 12.4648C7.31577 12.7383 7.67124 12.9023 8.0814 12.9023C8.46421 12.9023 8.81968 12.7383 9.09312 12.4648L13.9056 7.57031C15.3548 6.06641 15.6556 3.25 13.6048 1.52734ZM12.9486 6.64062L8.16343 11.5352C8.10874 11.5898 8.05405 11.5898 7.97202 11.5352L3.18687 6.64062C2.17515 5.62891 1.98374 3.71484 3.37827 2.53906C4.44468 1.63672 6.0853 1.77344 7.12437 2.8125L8.0814 3.79688L9.03843 2.8125C10.0501 1.77344 11.6908 1.63672 12.7572 2.51172C14.1517 3.71484 13.9603 5.62891 12.9486 6.64062Z"
                          style="fill: #b02a37"
                        />
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="container bottom-0">
            <div class="d-flex justify-content-center">
              <nz-pagination [nzPageIndex]="pageIndex+1" [nzTotal]="totalElements" nzShowSizeChanger
                             [(nzPageSize)]="pageSize" (nzPageIndexChange)="pageIndexChange($event)"
                             (nzPageSizeChange)="pageSizeChange($event)" [nzPageSizeOptions]=pageSizeOptions></nz-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
